<template>
	<view class="app-container"  :style="{height: `calc(100vh - ${getHeight}px)`}">
		<u-sticky offsetTop="0" customNavHeight="0">
			<view class="navbar">
				<view class="btn" @click="createClass">
					<u-button icon="plus" size="small" color="#2563eb" icon-color="#fff">
						创建课程
					</u-button>
				</view>
			</view>
		</u-sticky>
		<view class="row-a1">
			<view class="list">
				<u-list @scrolltolower="scrolltolower" height="100%" :loading="true">
					<u-list-item v-for="(item, index) in dataList" :key="index">
						<view class="item">
							<view class="con-a1">
								<view class="name">
									{{item.className}}
								</view>
								<view
									:class="item.status == 1 ? 'status wait':item.status == 2?'status in':item.status == 3?'status over':'status cancel'">
									{{item.status == 1 ? '等待中' : item.status == 2 ? '进行中' : item.status == 3 ? '已结束' : '已取消'}}
								</view>
							</view>
							<view class="con-a2">
								<view class="icon">
									<u-icon name="calendar-fill" size="16"></u-icon>
								</view>
								<view class="data">
									日期: {{formatDate(item.classDate)}}
								</view>
							</view>
							<view class="con-a7" v-if="edit1 == index && edit2 == 0">
								<view class="text">
									<view class="left">
										时间段设置:
									</view>
									<view class="btn" @click="submit">
										保存
									</view>
								</view>
								<view class="box">
									<view class="txt">
										课程时间
									</view>
									<view class="data">
										<view class="start" @click="editTime(0,item.classTime[0])">
											{{ item.classTime[0] }}
										</view>
										<view class="txt">
											-
										</view>
										<view class="end" @click="editTime(1,item.classTime[1])">
											{{ item.classTime[1] }}
										</view>
									</view>
								</view>
							</view>
							<view class="con-a3" v-else>
								<view class="icon">
									<u-icon name="clock-fill" size="16"></u-icon>
								</view>
								<view class="data" @click="edit(item,index,0)">
									编辑时间段
								</view>
								<view class="icon" @click="edit(item,index,0)">
									<u-icon name="edit-pen-fill" size="16" color="#2563eb"></u-icon>
								</view>
							</view>
							<view class="con-a4">
								<view class="data-list">
									<view class="data-item">
										<view class="left">
											时间段1:
										</view>
										<view class="right">
											<view class="text">
												<view class="icon">
													<u-icon name="pushpin-fill" size="16" color="#ef4444">
													</u-icon>
												</view>
												<view class="txt">
													课程时间:{{ item.classTime[0] }} - {{ item.classTime[1] }}
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="con-a8" v-if="edit1 == index && edit2 == 1">
								<view class="icon">
									<u-icon name="clock-fill" size="16"></u-icon>
								</view>
								<view class="input">
									<u-input size="mini" fontSize="12" v-model="item.price" type="number"></u-input>
								</view>
								<view class="btn" @click="submit">
									保存
								</view>
							</view>
							<view class="con-a5" v-else>
								<view class="icon">
									<u-icon name="clock-fill" size="16"></u-icon>
								</view>
								<view class="data">
									¥{{ item.price }}
								</view>
								<view class="icon" @click="edit(item,index,1)">
									<u-icon name="edit-pen-fill" size="16" color="#2563eb"></u-icon>
								</view>
							</view>
							<view class="con-a9" v-if="edit1 == index && edit2 == 2">
								<view class="room">
									<view class="icon">
										<u-icon name="map-fill" size="16"></u-icon>
									</view>
									<view class="txt">
										{{ item.method ? item.method : "" }}
									</view>
								</view>
								<view class="people">
									<view class="icon">
										<u-icon name="man-add-fill" size="16"></u-icon>
									</view>
									<view class="input">
										<u-input size="mini" fontSize="12" v-model="item.orderNum"
											type="number"></u-input>
									</view>
								</view>
								<view class="btn" @click="submit">
									保存
								</view>
							</view>
							<view class="con-a6" v-else>
								<view class="room">
									<view class="icon">
										<u-icon name="map-fill" size="16"></u-icon>
									</view>
									<view class="txt">
										{{ item.method }}
									</view>
								</view>
								<view class="people">
									<view class="icon">
										<u-icon name="man-add-fill" size="16"></u-icon>
									</view>
									<view class="txt">
										{{ item.classStudent ? item.classStudent.length : 0}}/{{ item.orderNum}}人
									</view>
								</view>
								<view class="icon" @click="edit(item,index,2)">
									<u-icon name="edit-pen-fill" size="16" color="#2563eb"></u-icon>
								</view>
							</view>
						</view>
					</u-list-item>
					<u-list-item>
						<view class="loading">
							<u-loadmore :status="status" loading-text="努力加载中" loadmore-text="加载更多"
								nomore-text="没有更多了" />
						</view>
					</u-list-item>
				</u-list>
			</view>
		</view>
		<u-datetime-picker :show="show" v-model="time" mode="time" @confirm="timeConfirm"
			@cancel="timeCancel"></u-datetime-picker>
		<u-toast ref="uToast"></u-toast>
		<tabbar :name="2"></tabbar>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import tabbar from "@/components/tabbar/index.vue";
	import {
		classList,
		classEdit
	} from "@/api/class/class.js"
	import {
		formatDateWeek,
		isMoreThanAnHourLater
	} from "@/util/index.js"
	export default {
		data() {
			return {
				list: ['即将开始', '历史课程'],
				current: 0,
				dataList: [],
				total: 0,
				show: false,
				time: "",
				edit1: -1,
				edit2: -1,
				edit3: -1,
				page: {
					pageSize: 10,
					pageNum: 1
				},
				status: "loading"
			}
		},
		computed: {
			...mapState(['$userInfo']),
			formatDate() {
				return (date) => {
					return formatDateWeek(date);
				}
			},
			getHeight(){
				return this.$globalVariable.height;
			}
		},
		components: {
			tabbar
		},
		methods: {
			createClass() {
				uni.$u.route({
					url: '/pages/addClass/index'
				})
			},
			scrolltolower() {
				if (this.dataList.length < this.total) {
					this.page.pageNum += 1;
					this.getList();
				} else {
					this.status = "nomore";
				}
			},
			toggle(item) {
				this.current = item;
			},
			submit() {
				let data = this.dataList[this.edit1];
				let dateTime = data.classDate + " " + data.classTime[0] + ":00"
				let that = this;
				if (!isMoreThanAnHourLater(dateTime)) {
					that.$refs.uToast.show({
						type: "default",
						message: "日期时间不合理",
					});
					return;
				}
				let param = {
					...data
				}
				classEdit(param).then(res => {
					if (res.code == 200) {
						that.edit1 = -1;
						that.edit2 = -1;
						that.edit3 = -1;
						that.reset();
					}
				})

			},
			reset() {
				this.status = "loading";
				this.page = {
					pageSize: 10,
					pageNum: 1
				};
				this.dataList = [];
				this.total = 0;
				this.getList();
			},
			edit(row, ind1, ind2) {
				if (row.status == 2) {
					return;
				}
				this.edit1 = ind1;
				this.edit2 = ind2;
			},
			timeConfirm(val) {
				let data = this.dataList[this.edit1];
				let type = this.edit3;
				switch (type) {
					case 0:
						if (data.classTime[1] != null) {
							if (val.value > data.classTime[1]) {
								this.$refs.uToast.show({
									type: "default",
									message: "开始时间不能大于结束时间",
								});
								return false;
							}
							data.classTime[0] = val.value;
						}
						break;
					case 1:
						if (data.classTime[0] != null) {
							if (data.classTime[0] > val.value) {
								this.$refs.uToast.show({
									type: "default",
									message: "结束时间不能小于开始时间",
								});
								return false;
							}
							data.classTime[1] = val.value;
						}
						break;
					default:
						break;
				}
				this.show = false;
			},
			timeCancel() {
				this.show = false;
			},
			editTime(ind, data) {
				this.edit3 = ind;
				this.time = data;
				this.show = true;
			},
			getList() {
				// 1待开始, 2进行中, 3已完成, 4已取消
				this.status = "loading";
				classList({
					teacherId: this.$userInfo._id,
					...this.page,
					status: [1, 2]
				}).then(res => {
					this.dataList.push(...res.data.records);
					this.total = res.data.total;
					if (res.data.total > this.dataList.length) {
						this.status = "loadmore";
					} else {
						this.status = "nomore";
					}
				})
			}
		},
		onShow() {
			this.reset();
		},
		onLoad() {

		},
		onLaunch() {

		}
	}
</script>

<style lang="scss">
	.app-container {
		overflow: hidden;
		.navbar {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			padding: 30px 10px 10px 10px;
			height: 95px;
			box-sizing: border-box;
		}

		.row-a1 {
			height: calc(100% - 95px);

			.list {
				padding-top: 20rpx;
				height: 100%;
				box-sizing: border-box;

				.item {
					padding: 20rpx;
					border-radius: 10px;
					background-color: #fff;
					margin: 0 20rpx 20rpx 20rpx;

					.con-a1 {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 10px;

						.name {
							font-weight: bold;
						}

						.status {
							font-size: 12px;
							background-color: #fff;
							padding: 2px 8px;
							border-radius: 10px;

							&.wait {
								background-color: #FFFFE0;
							}

							&.in {
								background-color: #E0FFFF;
							}

							&.over {
								background-color: #90EE90;
							}

							&.cancel {
								background-color: #FFB6C1;
							}
						}
					}

					.con-a2,
					.con-a3,
					.con-a5,
					.con-a6,
					.con-a8,
					.con-a9 {
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
						font-size: 24rpx;
						margin-bottom: 10px;

						.icon {
							margin-right: 5px;
						}
					}

					.con-a3 {
						.data {
							color: #2563eb;
						}
					}

					.con-a4 {
						.data-list {
							.data-item {
								display: flex;
								flex-direction: row;
								justify-content: flex-start;
								align-items: flex-start;
								color: #93a8be;

								.left {
									font-size: 24rpx;
									padding: 0 20px;
								}

								.right {
									.text {
										display: flex;
										flex-direction: row;
										justify-content: flex-start;
										align-items: flex-start;
									}
								}
							}
						}
					}

					.con-a5 {
						.data {
							color: #2563eb;
						}
					}

					.con-a6 {
						margin-bottom: 0px;

						.room,
						.people {
							display: flex;
							flex-direction: row;
							justify-content: flex-start;
							align-items: flex-start;

						}

						.room {
							margin-right: 10px;
						}
					}

					.con-a7 {

						.text {
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: center;
							font-size: 24rpx;
							margin-bottom: 5px;

							.btn {
								padding: 2px 8px;
								border-radius: 4px;
								color: #fff;
								background-color: #2563eb;
							}
						}

						.box {
							border: solid 1px #e5e7eb;
							padding: 10px;
							border-radius: 10px;
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: center;
							font-size: 24rpx;

							.txt {
								margin-bottom: 5px;
							}

							.data {
								padding: 2px 10px;
								border-radius: 4px;
								border: solid 1px #e5e7eb;
								display: flex;
								flex-direction: row;
								justify-content: space-between;
								align-items: center;

								.txt {
									margin: 0 5px;
								}
							}
						}
					}

					.con-a8 {
						.icon {
							margin-right: 5px;
						}

						.input {
							margin-right: 5px;

							.u-input {
								height: 20px;
								box-sizing: border-box;
							}
						}

						.btn {
							padding: 2px 8px;
							border-radius: 4px;
							color: #fff;
							background-color: #2563eb;
						}
					}

					.con-a9 {
						margin-bottom: 0px;

						.room,
						.people {
							display: flex;
							flex-direction: row;
							justify-content: flex-start;
							align-items: flex-start;

						}

						.room {
							margin-right: 10px;
						}

						.people {
							.input {
								margin-right: 5px;
								width: 100px;

								.u-input {
									height: 20px;
									box-sizing: border-box;
								}
							}
						}

						.btn {
							padding: 2px 8px;
							border-radius: 4px;
							color: #fff;
							background-color: #2563eb;
						}
					}
				}

				.loading {
					padding: 20rpx;
					margin: 0 20rpx 20rpx 20rpx;
				}
			}
		}

	}
</style>